
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>CSS <span class="color_h1">字体</span>
</h1>
<hr/>
<p class="intro">CSS字体属性定义字体，加粗，大小，文字样式。</p>
<hr/>
<h2>serif和sans-serif字体之间的区别</h2>
<img alt="Serif vs. Sans-serif" decoding="async" fetchpriority="high" height="142" src="/images/serif.gif" width="398"/><p><img alt="Remark" decoding="async" src="/images/lamp.gif"/> 在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读</p>
<hr/>
<h2>CSS字型</h2>
<p>在CSS中，有两种类型的字体系列名称：</p>
<ul>
<li>
<b>通用字体系列</b> - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）</li>
<li>
<b>特定字体系列</b> - 一个特定的字体系列（如 "Times" 或 "Courier"）</li>
</ul>
<table class="reference">
<tbody><tr>
<th align="left" width="22%">Generic family</th>
<th align="left" width="31%">字体系列</th>
<th align="left" width="47%">说明</th>
</tr>
<tr>
<td>Serif</td>
<td><span style="font-size:150%;font-family:Times New Roman">Times New Roman</span><br/>
<span style="font-size:150%;font-family:Georgia">Georgia</span></td>
<td>Serif字体中字符在行的末端拥有额外的装饰</td>
</tr>
<tr>
<td>Sans-serif</td>
<td><span style="font-size:150%;font-family:Arial">Arial</span><br/>
<span style="font-size:150%;font-family:Verdana">Verdana</span></td>
<td>"Sans"是指无 - 这些字体在末端没有额外的装饰</td>
</tr>
<tr>
<td>Monospace</td>
<td><span style="font-size:150%;font-family:Courier New">Courier New</span><br/>
<span style="font-size:150%;font-family:Lucida Console">Lucida Console</span></td>
<td>所有的等宽字符具有相同的宽度</td>
</tr>
</tbody></table>
<br/><hr/>
<h2>字体系列</h2>
<p> font-family 属性设置文本的字体系列。</p>
<p> font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。</p>
<p><b>注意</b>: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。</p>
<p>多个字体系列是用一个逗号分隔指明：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
p{font-family:"Times New Roman", Times, serif;}
</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p>对于较常用的字体组合，看看我们的 <a >Web安全字体组合</a>。</p>
<hr/>
<h2>字体样式</h2>
<p>主要是用于指定斜体文字的字体样式属性。</p>
<p>这个属性有三个值：</p>
<ul>
<li>正常 - 正常显示文本</li>
<li>斜体 - 以斜体字显示的文字</li>
<li>倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）</li>
</ul>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
p.normal {font-style:normal;}<br/>
p.italic {font-style:italic;}<br/>
p.oblique {font-style:oblique;}</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<br/><hr/>
<h2>字体大小</h2>
<p>font-size 属性设置文本的大小。</p>
<p>能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。</p>
<p>请务必使用正确的HTML标签，就&lt;h1&gt; - &lt;h6&gt;表示标题和&lt;p&gt;表示段落： </p>
<p>字体大小的值可以是绝对或相对的大小。</p>
<p>绝对大小：</p>
<ul>
<li>设置一个指定大小的文本</li>
<li>不允许用户在所有浏览器中改变文本大小</li>
<li>确定了输出的物理尺寸时绝对大小很有用</li>
</ul>
<p>相对大小：</p>
<ul>
<li>相对于周围的元素来设置大小</li>
<li>允许用户在浏览器中改变文字大小</li>
</ul>
<p><img alt="Remark" decoding="async" src="/images/lamp.gif"/> 如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。</p>
<hr/>
<h2>设置字体大小像素</h2>
<p>设置文字的大小与像素，让您完全控制文字大小：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
h1 {font-size:40px;}<br/>
h2 {font-size:30px;}<br/>
p {font-size:14px;}</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p>上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。</p>
<p>虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本</p>
<hr/>
<h2>用em来设置字体大小</h2>
<p>为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。</p>
<p>em的尺寸单位由W3C建议。</p>
<p>1em和当前字体大小相等。在浏览器中默认的文字大小是16px。</p>
<p>因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：<span class="marked">px/16=em</span></p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
h1 {font-size:2.5em;} /* 40px/16=2.5em */<br/>
h2 {font-size:1.875em;} /* 30px/16=1.875em */<br/>
p {font-size:0.875em;} /* 14px/16=0.875em */</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p>在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。</p>
<p>不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。</p>
<hr/>
<h2>使用百分比和EM组合</h2>
<p>在所有浏览器的解决方案中，设置 &lt;body&gt;元素的默认字体大小的是百分比： </p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
body {font-size:100%;}<br/>
h1 {font-size:2.5em;}<br/>
h2 {font-size:1.875em;}<br/>
p {font-size:0.875em;}</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p>我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。</p>
<hr/>
<div class="tryit_ex">
<img alt="Examples" decoding="async" height="46px" src="/images/tryitimg.gif" width="40"/><h2>更多实例</h2>
</div>
<p><a  target="_blank">设置字体加粗</a><br/>
这个例子演示了如何设置字体的加粗。</p>
<p><a  target="_blank">可以设置字体的转变</a><br/>
这个例子演示了如何设置字体的转变。</p>
<p><a  target="_blank">在一个声明中的所有字体属性</a><br/>
本例演示如何使用简写属性将字体属性设置在一个声明之内。</p>
<hr/>
<h2>所有CSS字体属性</h2>
<table class="reference notranslate">
<tr>
<th align="left" width="25%">Property</th>
<th align="left" width="75%">描述</th>
</tr>
<tr>
<td><a >font</a></td>
<td>在一个声明中设置所有的字体属性</td>
</tr>
<tr>
<td><a >font-family</a></td>
<td>指定文本的字体系列</td>
</tr>
<tr>
<td><a >font-size</a></td>
<td>指定文本的字体大小</td>
</tr>
<tr>
<td><a >font-style</a></td>
<td>指定文本的字体样式</td>
</tr>
<tr>
<td><a >font-variant</a></td>
<td>以小型大写字体或者正常字体显示文本。</td>
</tr>
<tr>
<td><a >font-weight</a></td>
<td>指定字体的粗细。</td>
</tr>
</table> <div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    